<template>
  <div class="assets-record over-bg">
    <div class="title text-left text-18 person-bg">
      {{ $t("assets.assetRecord") }}
    </div>
    <div
      class="tab-box textperson-t3 person-bg flex js-st align-center point bdb-borderBase"
    >
      <div
        class="tab text-14"
        @click="changeTab(1)"
        :class="{ 'textperson-t2 text-bold active-line': state.active === 1 }"
      >
        {{ $t("assets.rechargeRecord") }}
      </div>
      <div
        class="tab text-14"
        @click="changeTab(2)"
        :class="{ 'textperson-t2 text-bold active-line': state.active === 2 }"
      >
        {{ $t("assets.withdrawalsRecord") }}
      </div>
      <!-- <div
        class="tab text-14"
        @click="changeTab(3)"
        :class="{ 'textperson-t2 text-bold active-line': state.active === 3 }"
      >
        {{ $t("assets.transferRecord") }}
      </div> -->
    </div>
    <div class="record-box person-bg">
      <div
        v-show="state.active === 2 && isWithdrawUser"
        class="flex align-center js-st text-14 mb-16"
      >
        <div
          class=" cash-tab point"
          @click="changeType(1)"
          :class="state.type === 1 ? 'color_42 active-tab' : 'color_98'"
        >
          {{ $t("assets.rechargeAddress") }}
        </div>
        <div
          class="ml-30  cash-tab  point"
          @click="changeType(2)"
          :class="state.type === 2 ? 'color_42 active-tab' : 'color_98'"
        >
          {{ $t("assets.PlatformUsers") }}
        </div>
      </div>
      <RecordRecharge v-if="state.active === 1" />
      <RecorCash v-if="state.active === 2" :type="state.type" ref="tableRef" />
      <RecordHuazhuan v-if="state.active === 3" />
    </div>
  </div>
</template>

<script>
import RecordRecharge from "@/components/personModel/assets/record-recharge.vue";
import RecorCash from "@/components/personModel/assets/record-cash.vue";
import RecordHuazhuan from "@/components/personModel/assets/record-huazhuan.vue";
import { onMounted, reactive, ref, computed } from "vue";
import { useStore } from "vuex";
import { useRoute } from "vue-router";
export default {
  name: "Myassets",
  components: { RecordRecharge, RecorCash, RecordHuazhuan },
  setup() {
    const state = reactive({
      active: 1,
      type: 1,
    });
    const $store = useStore();
    const tableRef = ref();
    const changeTab = (i) => {
      state.active = i;
    };
    const changeType = (val) => {
      state.type = val;
      // tableRef.value.currentchange(0);
    };
    const $route = useRoute();
    //是否需要显示提币到平台用户
    const isWithdrawUser = computed(() => {
      let list = $store.state.user.systemInfo;
      let flag = false;
      list.forEach((ele) => {
        if (ele.key === "withdraw_platform_user") {
          flag = ele.value;
          if (!flag) {
            state.type = 1;
          }
        }
      });
      return flag;
    });
    onMounted(() => {
      console.log('是我吗')
      state.active = $route.query.active ? Number($route.query.active) : 1;
    });
    return {
      state,
      changeTab,
      changeType,
      tableRef,
      isWithdrawUser,
    };
  },
};
</script>

<style scoped lang="less">
.assets-record {
  width: 100%;
}
.title {
  width: 100%;
  height: 65px;
  line-height: 65px;
  padding: 0 30px;
  font-family: PingFang SC;
  font-weight: bold;
  margin-bottom: 1px;
}
.tab-box {
  width: 100%;
  height: 48px;
  padding: 0 30px;
  box-sizing: border-box;
}
.tab {
  min-width: 56px;
  height: 100%;
  line-height: 48px;
  margin-inline-end: 30px;
  position: relative;
}
.record-box {
  width: 100%;
  padding: 30px 20px;
  box-sizing: border-box;
}
.ml-30 {
  margin-inline-start: 30px;
}
.cash-tab {
  padding: 4px 10px;
  border-radius: 8px;
}
.active-tab {
  background: #eef0f2;
}
.mb-16 {
  margin-bottom: 16px;
}
</style>
